<template>
  <div id="echars">
    <div style="height: 100px">
      <visits></visits>
    </div>

    <p style="
        color: rgb(131, 165, 237);
        font-weight: bold;
        font-size: 25px;
        text-align: center;
      ">
      图书借还书柱状图
    </p>
    <v-chart class="chart" style="height: 300px" :option="curveOption" />
  </div>
</template>
<script setup >
import visits from "../components/visits.vue";
import { ref, reactive, watch, h, nextTick, onMounted,onBeforeMount } from "vue";
import VChart from "vue-echarts";
import myAxios from "../axios";
// echarts按需引入
import { use, graphic } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart, PictorialBarChart } from "echarts/charts";
import { TooltipComponent, LegendComponent, GridComponent } from "echarts/components";
use([
  CanvasRenderer,
  BarChart,
  PictorialBarChart,
  TooltipComponent,
  LegendComponent,
  GridComponent,
]);
onBeforeMount(() => {
  myAxios(
    {
      url: '/eChars/getBorrowMonth',
      //注意get传值是params
      method: "get"
    }).then(res => {
      if (res.code == 200)
      
      for (let index = 0; index < res.result.length; index++) {
         curveOption.value.series[0].data.push(res.result[index])
      }  
      myAxios(
        {
          url: '/eChars/getReturnMonth',
          //注意get传值是params
          method: "get"
        }).then(res => {
          if (res.code == 200)
            for (let index = 0; index < res.result.length; index++) {
              curveOption.value.series[1].data.push(res.result[index])
            }
            console.log( curveOption.value.series[1])
       
        })
    })

})


// echarts
const curveOption = ref({
  color: ["#00B09C", "#93cc79", "#f9c761", "#ec6468", "#18a3a0"],
  tooltip: {
    trigger: "axis",
  },
  legend: {
    textStyle: {
      color: "#ffffff",
    },
    icon: "rect",
    itemWidth: 14,
    itemHeight: 3,
  },


  xAxis: {
    data: [
      "一月",
      "二月",
      "三月",
      "四月",
      "五月",
      "六月",
      "七月",
      "八月",
      "九月",
      "十月",
      "十一月",
      "十二月",
    ],
    type: "category",
    nameLocation: "middle",
    //刻度线
    axisLine: {
      lineStyle: {
        color: "#cbcbcb",
      },
    },
    axisTick: {
      lineStyle: {
        color: "#cbcbcb",
      },
      alignWithLabel: true,
    },
    axisLabel: {
      color: "#999999",
    },
    // 鼠标悬浮阴影
    axisPointer: {
      type: "shadow",
    },
  },
  yAxis: {
    scale: true,
    splitLine: {
      lineStyle: {
        color: "rgba(30,163,255,0.3)",
      },
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      lineStyle: {
        color: "#cbcbcb",
      },
    },
    axisLabel: {
      color: "#999999",
    },
  },
  grid: {
    left: "2%",
    right: "2%",
    bottom: 10,
    containLabel: true,
  },
  series: [
    // 第一个圆柱顶部的椭圆形

    {
      name: "借书数据",
      data: [

      ],
      type: "bar",
      barWidth: 14,
      barGap: "50%", //柱状图间距，此处为14*50%=7
      itemStyle: {
        // 图形样式
        color: new graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0, // 0%处的颜色
            color: "rgba(21, 147, 197,1)",
          },
          {
            offset: 1, // 100%处的颜色
            color: "rgba(12, 97, 162,1)",
          },
        ]),
      },
    },

    // 第二个圆柱顶部的椭圆形

    {
      name: "还书数据",
      data: [

      ],
      type: "bar",
      barWidth: 14,
      itemStyle: {
        // 图形样式
        color: new graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0, // 0%处的颜色
            color: "rgba(42, 181, 222,1)",
          },
          {
            offset: 1, // 100%处的颜色
            color: "rgba(23, 167, 205,1)",
          },
        ]),
      },
    },
  ],
});
</script>
<style>
#echars {
  width: 100%;
  height: 550px;
}
</style>
